<template>
  <div class="comments-list">
    <div class="comment-item" v-for="comment in comments" :key="comment.commentId">
      <img :src="getAvatar(comment)" alt="用户头像" class="avatar" />
      <div class="comment-content-area">
        <div class="comment-meta">
          <span class="nickname">{{ comment.nickname }}</span>
          <span class="date">{{ formatDate(comment.createdAt) }}</span>
        </div>
        <div class="comment-text">{{ comment.content }}</div>
        <div class="comment-actions">
          <span class="action-btn" @click="$emit('reply', comment.commentId)">回复</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  comments: {
    type: Array,
    required: true
  }
})

const defaultAvatar = '/default-avatar.png'

const getAvatar = (comment) => {
  return comment?.avatar || defaultAvatar
}

const formatDate = (dateStr) => {
  return new Date(dateStr).toLocaleString('zh-CN', {
    year: 'numeric', month: '2-digit', day: '2-digit',
    hour: '2-digit', minute: '2-digit'
  })
}
</script>

<style scoped>
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.comment-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.comment-content-area {
  flex: 1;
}

.comment-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  margin-bottom: 4px;
}

.nickname {
  font-weight: 600;
  color: #333;
}

.date {
  font-size: 12px;
  color: #999;
}

.comment-text {
  font-size: 15px;
  color: #222;
  margin-bottom: 8px;
  line-height: 1.6;
}

.comment-actions {
  font-size: 13px;
  color: #999;
}

.action-btn {
  cursor: pointer;
  color: #409EFF;
}

.action-btn:hover {
  text-decoration: underline;
}
</style>
